<template>
        <div class="groupbuymain" @scroll='setScrollTop($event)'>
          <header>限时团购</header>
          <div class="groupbuy-hot-show">
            <img src="../image/sp6.png" />
          </div>
          <div class='box'>
            <Loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore"
              :bottom-pull-text="bottomPullText" :autoFill="false" v-if="list.length>0">
              <div style="text-align: center;margin: 0.1rem 0rem;">
                <div>REMENSHICHANG</div>
                <div>热门商品</div>
              </div>
              <ul class="goods-list">
                <li v-for='(item,index) in list' :key='index'>
                  <router-link :to="{name:'groupbuycommoditydetails',query:{id:item.id}}">
                    <div class="groupbuy-goods-cover">
                      <img :src="item.img_url" width="100%" height="100%" />
                    </div>
                    <div class="goods-name" style="height:0.25rem">
                      <span>{{item.name}}</span>
                    </div>
                    <div style="height: 0.28rem;
                    margin: 0px 10px;
                    display: flex;
                    justify-content: space-between;
                    border-bottom: 1px dotted #a0a2a6;">
                      <div class="groupbuy-price">{{item.cost_price}}<b style="color: rgb(49,54,68);
                          font-size: 10px;margin-left:2px;">RMB</b></div>
                      <div class="groupbuy-yuanjia">{{item.price}}元</div>
                    </div>
      
                    <div style="text-align: center">抢购倒计时:</div>
                    <div class="timedown">
                      {{timeArrr[index].days}}天 {{timeArrr[index].hours}}时{{timeArrr[index].minutes}}
                      分{{timeArrr[index].seconds}}
                    </div>
                  </router-link>
                </li>
                <li class='oddLi' v-if='oddLi'>
      
                </li>
              </ul>
            </Loadmore>
            <div class='mc' v-if="noData">
                  <img src="../image/no_date.png" alt="">
                  <p style="font-size: 14px;color: rgb(102, 102, 102)">精彩产品正在对接中,很快就要呈现啦!</p>
                </div>
          </div>
        </div>
      </template>
      <script>
        import {
          Loadmore
        } from 'mint-ui';
        import countDown from '../components/countDown.vue'
        export default {
          data() {
            return {
              noData:false,
              show: false, //显示
              timeArrr: [],
              isCount: 'true',
              time: '',
              list: [],
              sentPage: {
                page: 1, //分页累加
                rows: 10
              }, //接口入参
              totalNum: 0, //总数据条数
              allLoaded: false, //分页数据是否已经加载完毕
              bottomPullText: "上拉查看下一页", //上拉提示信息
              oddLi: false, //解决上拉刷新字显示位置问题 当li为奇数时为true
            }
          },
      
          created() {
            this.isLogin()
            this.getGoodsList(this.sentPage);
            this.justUserType()
          },
          //history模式下 返回会触发
          activated() {
            if (localStorage.getItem("scrollTop")) {
              $('.groupbuymain').scrollTop(localStorage.getItem("scrollTop"));
            }
            this.justUserType()
          },
      
          components: {
            Loadmore,
            countDown
      
          },
          methods: {
            // 登录拦截
            isLogin() {
              this.userid = localStorage.getItem("loginMobile");
              if (!this.userid) {
                this.$router.push({
                  name: 'login1'
                })
                return false;
              } else {
                return true;
              }
            },
            callback() {
              this.$utils._toast("已结束");
            },
            //记录滚动位置
            setScrollTop(e) {
              localStorage.setItem("scrollTop", e.target.scrollTop);
            },
            //倒计时
            countDown(times, index) {
              let timer = setInterval(() => {
                let day = 0,
                  hour = 0,
                  minute = 0,
                  second = 0;
                if (times > 0) {
                  day = Math.floor(times / (60 * 60 * 24));
                  hour = Math.floor(times / (60 * 60)) - (day * 24);
                  minute = Math.floor(times / 60) - (day * 24 * 60) - (hour * 60);
                  second = Math.floor(times) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
                } else {
                  day = hour = minute = second = 0;
                }
                if (hour <= 9) hour = '0' + hour;
                if (minute <= 9) minute = '0' + minute;
                if (second <= 9) second = '0' + second;
                times--;
                this.timeArrr[index].days = day
                this.timeArrr[index].hours = hour
                this.timeArrr[index].minutes = minute
                this.timeArrr[index].seconds = second
                if (times < 0) {
                  clearInterval(timer);
                }
              }, 1000);
            },
            //获取商品列表
            getGoodsList(params) {
              var that = this;
              this.$api.post(this.$api.baseURLSchool, "goods_count_down?classify=1&&customer_type=1", params, r => {
                this.totalNum = r.data.records;
                if (r.data.ret == -3) {
                  localStorage.clear();
                  this.isLogin()
                }
                if (this.sentPage.page == 1) {
                  that.list = r.data.rows;
                } else {
                  that.list = that.list.concat(r.data.rows);
                }
                if(that.list.length==0){
                    that.noData=true;
                }
      
                that.list.forEach((element, index) => {
                  that.timeArrr.push(element.remain_time)
                  var d = element.remain_time.days * 60 * 60 * 24;
                  var h = element.remain_time.hours * 60 * 60;
                  var m = element.remain_time.minutes * 60;
                  var s = element.remain_time.seconds;
                  if (Number(d + h + m + s) > 0) {
                    this.show = true;
                  }
                  this.countDown(Number(d + h + m + s), index)
                });
                if (r.data.rows.length == 0 && this.sentPage.page > 1) {
                  that.$utils._toast("暂无更多数据");
                }
                if (this.totalNum % 2 != 0) {
                  this.oddLi = true;
                } else {
                  this.oddLi = false;
                }
              }, err => {
                console.log(err);
              })
            },
            //下拉刷新
            loadTop() {
              this.sentPage.page = 1;
              setTimeout(() => {
                this.getGoodsList(this.sentPage);
                this.allLoaded = false;
              }, 20);
              this.$refs.loadmore.onTopLoaded();
            },
            //上拉加载
            loadBottom() {
              (this.sentPage.page) ++;
              setTimeout(() => {
                this.getGoodsList(this.sentPage);
              }, 20);
              if (this.totalNum == this.list.length) {
                this.allLoaded = true;
              }
              this.$refs.loadmore.onBottomLoaded();
            },
      
            justUserType() { //判断用户是否通过医生认证
              if (localStorage.getItem("loginMobile")) {
                this.userid = localStorage.getItem("loginMobile");
                localStorage.removeItem("type_sub");
                this.$api.get(this.$api.baseURLSchool, "select_cid/user/" + this.userid, {}, r => {
                  if (r.data.info.type == 'clinic') {
                    this.type = 'ImClinic'
                  } else if (r.data.info.type == 'doctor') {
                    this.type = 'ImDoctor'
                    localStorage.setItem("type_sub", JSON.stringify(r.data.info.type_sub));
                  }
                  if (r.data.ret == 1) {
                    if (r.data.info.type) {
                      this.usertype = r.data.info.type;
                    }
                  }
                }, err => {
                  console.log(err);
                })
              }
            },
      
          },
          mounted() {
            let that = this;
            let interval = window.setInterval(function () {
              if ((that.time--) <= 0) {
                that.time = 60;
                window.clearInterval(interval); //停止
              }
            }, 1000);
          },
        }
      
      </script>
      
      <style lang="scss" scoped>
        .goods-name {
          position: relative;
      
          .time {
            position: absolute;
            right: 0px;
            top: 0px;
          }
        }
      
        .mc {
          display: flex;
          flex-direction: column;
          align-items: center;
          p {
            padding-top: 15px;
          }
        }
      
        .timedown {
          height: 0.21rem;
          width: 94%;
          position: absolute;
          bottom: 3px;
          left: 5px;
          text-align: center;
          color: #ecbb0a;
        }
      
        .goods-list {
          display: flex;
          justify-content: space-around;
          flex-wrap: wrap;
        }
      
      </style>
      